/* BASE */
body {
    background: #fff;
    font-family: 'proxima-nova', sans-serif;
    font-size: 14px;
	color: #5F5C41;
}
i {
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
}

/* HEADER */
header {
    position:relative;
    padding-top:0px;
	background: #AAC5F2;
	position: fixed;
	width: 100%;
	border-bottom: solid 4px rgba(213, 222, 237, 1);
}
header #desk-nav ul {
    text-align: right;
}
header #desk-nav li {
    display: inline-block;
}
header #desk-nav a {
    display: inline-block;
    margin: 0 6px;
    padding: 0 10px;
    font-size: 15px;
    color: #7D802A;
    text-decoration: none;
    border: 1px solid #fff;
    height: 35px;
    line-height: 35px;
	border-radius: 8px;
}

header #desk-nav a:hover {
    background: #efefef;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
header #desk-nav li.current_page_item a, header #desk-nav li.current_page_item a:hover {
    background: #fff;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
header #mobi-nav {
    background:#efefef;
    margin-top:16px;
    padding:4px 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
header #mobi-nav li {
    display:block;
}
header #mobi-nav a {
    display:block;
    color:#333;
    line-height:32px;
    font-size:15px;
}
body.no-title header {
    padding-bottom:18px;
}

/* MOBILE HEADER STICK */
@media (max-width:768px) {
    body header {
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:9999;
    }
    body {
        padding-top:146px;
    }
    body.no-title {
        padding-top:86px;
    }
    body.no-title header {
        border-bottom:2px solid #333;
    }
    body.no-pad, body.no-title.no-pad {
        padding-top:0px !important;
    }
}

/* MOBILE NAV */
#mobi-toggle {
    display:inline-block;
    background: #fff;
    padding: 1px;
    border: 3px solid #e0e0e0;
    margin-right: 8px;
    border-radius: 8px;
    height:42px;
    width:42px;
    text-align:center;
    position:relative;
}
#mobi-toggle span {
    position:absolute;
    display:block;
    height:3px;
    width:24px;
    background:#000;
    left:6px;
}
#mobi-toggle span:nth-child(1) {
    top:8px;
}
#mobi-toggle span:nth-child(2) {
    top:16px;
}
#mobi-toggle span:nth-child(3) {
    top:24px;
}



/* SECTIONS */
main {
    padding:50px 0;
    /*background-image: url(../img/redes_azul.png);*/
}

mainCompra {
    padding:50px 0;
    background-image: url(../img/redes_azul.png);
}

section {
    color:#93A0A5;
    line-height: 22px;
    padding-top:40px;
    padding-bottom:40px;
    font-size:16px;
    text-align:left;
}
section.alt {
    background:#303335;
    color:#9397a0;
    
}

/* SUBTITLES */
.subtitle {
    text-align:center;
}
.subtitle h2 {
    font-weight: bold;
    font-size: 36px;
    color: #303435;
    line-height: 42px;
    margin-bottom: 12px;
}
.subtitle p {
    font-size:16px;
}
section.alt .subtitle h2 {
    color:#fff;
}

@media (max-width:768px) {
    .subtitle h2 {
        font-size: 24px;
        line-height:30px;
    }
    .subtitle p {
        font-size:14px;
        line-height:20px;
    }
}

/* HOME PAGE */
#hero {
    position:relative;
    padding-top: 130px;
    background: #2d3133 url('../img/hero_bg.png') top center repeat-x;
    text-align: center;  
    text-align:center;
    z-index:1000;
}
#hero h1 {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    line-height: 42px;
    margin-top: 40px;
    margin-bottom: 8px;
}
#hero p {
    font-size: 15px;
    color: #93a0a5;
    line-height: 24px;
}
#hero .buttons {
    z-index:500;
    margin-bottom:40px;
}
#hero .buttons a {
    position:relative;
    display: inline-block;
    height: 48px;
    line-height: 48px;
    background: #ff6445;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    margin: 24px 5px 0 5px;
    padding: 0 36px;
    
    text-shadow: 1px 1px 2px rgba(128,55,41,1.0);
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    z-index:500;
}
#hero .buttons a:hover {
    background: #e55a3e;
}
#hero .chart {
    position:relative;
    margin:0 auto;
    height:358px;
    width:auto;
    max-width:944px;
    z-index:10;
    margin-top:-90px;
}
#hero .chart .axis {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    background:url('../img/chart_axis.gif') top left no-repeat;
    width:40px;
    z-index:10;
}
#hero .chart .content {
    position:absolute;
    left:38px;
    right:0;
    bottom:0px;
    background:url('../img/chart_content.gif') top left no-repeat;
    height:315px;
    z-index:10;
}
@media (max-width:768px) {
    #hero h1 {
        font-size:24px;
    }
    #hero p {
        font-size:14px;
    }
}
section#process {
    text-align:left;
}
#process h3 {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: #303133;
}
#process p {
    position: absolute;
    font-size: 15px;
    color: #9397a0;
    line-height: 22px;
}
#process i {
    position: absolute;
    z-index: 100;
}
#process .line {
    background: url('../img/process_line.png') repeat-x;
    height: 7px;
    z-index: 1000;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 3px;
}
#process .step {
    position: relative;
    margin: 0 150px;
}

#process .step.step-1 {
    height: 222px;
}
#process .step.step-1 p {
    left: 110px;
    top: 68px;
}
#process .step.step-1 h3 {
    left: 110px;
    top: 28px;
}
#process i.step1 {
    top: 0;
    left: -88px;
    height: 217px;
    width: 170px;
    background-image: url('../img/step1.png');
}

#process .step.step-2 {
    height: 270px;
}
#process .step.step-2 p {
    left: 0;
    top: 90px;
    padding-right: 110px;
}
#process .step.step-2 h3 {
    left: 0;
    top: 60px;
}
#process i.step2 {
    top: -1px;
    right: -88px;
    height: 267px;
    width: 170px;
    background-image: url('../img/step2.png');
}

#process .step.step-3 {
    height: 242px;
}
#process .step.step-3 p {
    left: 110px;
    top: 124px;
}
#process .step.step-3 h3 {
    left: 110px;
    top: 84px;
}
#process i.step3 {
    top: 1px;
    left: -88px;
    height: 218px;
    width: 170px;
    background-image: url('../img/step3.png');
}
@media (max-width: 768px) {
    #process i, #process i.step1, #process i.step2, #process i.step3 {
        position:static;
        display:block;
        margin:0 auto 18px auto;
    }
    #process .step p, #process .step h3 {
        display:block;
        position:static;
        padding:0 !important;
    }
    #process .line {
        display:none;
    }
    #process .step {
        position:static;
        height:auto !important; 
        text-align:center;
        margin:0 0 18px 0;
        padding:0;
    }
    
}
section#howwork {
    text-align:center;
}
#howwork .colbars {
    margin-top:32px;
    position:relative;
}
#howwork .colbars p {
    color: #7d8286;
    line-height: 24px;
    font-size:14px;
    padding:0 18px;
}
#howwork .colbars h3 {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    padding-bottom: 9px;
}
#howwork i {
    height:69px;
    width:78px;
    background-position:center center;
    margin-bottom:12px;
}
#howwork i.why-clock {
    background-image:url('../img/why_clock.gif');
}
#howwork i.why-thumb {
    background-image:url('../img/why_thumb.gif');
}
#howwork i.why-support {
    background-image:url('../img/why_support.gif');
}
#testify .quote {
    position: relative;
    color: #525d66;
    font-family: 'Georgia',sans-serif;
    font-size: 24px;
    margin-top:18px;
    font-weight: 300;
    line-height: 40px;
    text-align:center;
}
#testify .author {
    text-align:right;
    font-size: 18px;
    font-weight: 300;
    padding: 18px 20px 0 20px;
    margin-top: 16px;
}
@media (max-width:768px) {
    #testify .quote {
        font-size:20px;
        line-height:32px;
    }
    #testify .author {
        font-size:16px;
    }
}
#getstarted {
    background:#f3632e;
    position:relative;
}
#getstarted .subtitle h2 {
    color:#fff;
}
#getstarted .subtitle p {
    color:#fde3d9;
    margin-bottom:14px;
}
#getstarted .buttons {
    text-align:center;
    position:absolute;
    bottom:-24px;
    left:0;
    right:0;
}
#getstarted .buttons a {
    display: inline-block;
    background: #303335;
    color: #fff;
    height: 48px;
    line-height: 48px;
    border-radius: 7px;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.75);
    text-decoration: none;
    margin: 0 5px;
    padding: 0 36px;
}
#getstarted .buttons a:hover {
    background: #202224;
}
@media (max-width:768px) {
    #getstarted .buttons {
        position:static;
    }
}

/* PRODUCTOS */
#productos {
    text-align:center;
	background:#D5DEED;
	border-bottom: solid 2px #C5B312;
	border-top: 2px solid #C6B413;
	background-image: url(../img/redes5.png);
	background-repeat: no-repeat;
	background-position: top center;
}
#productos .producto {
    color: #454949;
    display: inline-block;
    width: 270px;
    margin: 0 4px 10px 4px;
    padding:30px 0;
    border-radius: 10px;
}
#productos ul {
    text-align: center;
    padding-top: 14px;
    padding-bottom: 28px;
}
#productos li {
    clear: both;
    border-bottom: 1px solid #e8ebec;
    height: 42px;
    line-height: 42px;
    font-size:14px;
}
#productos .buy a:hover {
    background: #3d4245;
}
@media (max-width: 400px) {
    #productos .producto {
        display:block;
        width:auto;
        margin: 0 20px 12px 20px;
    }
}

/* FAQ */
#faq {
    line-height:22px;
    font-size:14px;
}
#faq .question {
    position:relative;
    color: #303437;
    padding-bottom: 12px;
}
#faq .answer {
    color: #76797c;
    position:relative;
}
#faq h2 {
    font-size:14px;
    font-weight:normal;
    line-height:22px;
    padding-left:24px;
}
#faq span {
    position:absolute;
    top:0;
    left:0;
}
#faq p {
    padding-left:24px
}
#faq hr {
    height: 1px;
    border: 0 none;
    outline: 0 none;
    background: #e6e7e7;
    margin: 30px 0;
}

/* PLAN PAGES */
#infoblocks p {
    font-size: 14px;
    line-height: 24px;
    color: #9397a0;
    margin-bottom: 36px;
}
#infoblocks h4 {
    font-size: 18px;
    color: #303133;
    font-weight: bold;
    line-height: 24px;
    margin-bottom: 16px;
}

/* FOOTER */
#extrafoot {
    height:28px;
    background:#e8ebec;
}
footer .nav {
    background:#e8ebec;
    padding:30px 0;
}
footer .nav ul {
    text-align:left;
}
footer .nav li {
    display:inline-block;
}
footer .nav a {
    display:block;
    line-height:36px;
    color:#788895;
    text-decoration:none;
    margin-right:18px;
    font-size:15px;
}
footer .nav a:hover {
    color:#333;
}
footer .copy {
    color: #5e6c7b;
    font-size: 14px;
    line-height: 30px;
    font-weight: 300;
    padding: 10px 0;
}
footer .copy img {
    float:right;
}
@media (max-width:768px) {
    footer .nav {
        padding:18px 0;
    }
    footer .nav a {
        font-size:14px;
        line-height:28px;
    }
    footer .nav ul {
        text-align: center;
    }
    footer .copy {
        padding:18px 0;
    }
}

/* Detalles compra 
.detalle {
border: 1px solid #C5B312;
max-width: 640px;
margin: 0 auto;
}
*/

/*****************************
**** RESUMEN DE LA COMPRA ****
*****************************/
label,input,button{display:block;}
.detalle{
	/*border:1px solid #C5B312;
	max-width:640px;
	margin:0 auto;
	text-align: justify;*/
  	border: 1px solid #C1B22F;
  	/*max-width: 640px;
  	margin: 0 auto;*/
  	width: 729px;
  	margin: 0px 244px;
  	text-align: justify;
}
.detalle .detalle-head{
	background:#C1B22F;
	color:#444;
	font-size:17px;
	font-weight:bold;
	line-height:28px;
	padding:0 10px;
	border-bottom:1px solid #e6e6e6;
	/*background-image: url(../img/redes_azul.png);*/
}
.detalle .detalle-inner{
	padding:10px;
	background: rgb(213, 222, 237);
	font-size: 14px;
	line-height: 18px;
	color: #303435;
}
#entpg label{
	font-size:14px;
	font-weight:400;
	line-height:20px;
}
#entpg input{
	padding:6px 8px;
	line-height:20px;
	height:30px;
	border:1px solid #BBAA14;
	outline:0 none;
	font-size:16px;
	color:#777;
	margin-bottom:10px;
	width:100%;
}
#entpg input:focus{color:#333;border:1px solid #b0b0b0;}
#entpg button{border:0 none;outline:0 none;font-size:14px;font-weight:bold;text-decoration:none;height:42px;line-height:42px;padding:0 24px;color:#fff;background:#C5B312;}
.alert{padding:10px;line-height:22px;margin-bottom:12px;color:#462323;border:1px solid #efd2d2;background:#fce7e7;}
.alert strong{font-weight:600;}
::-webkit-input-placeholder{color:#ccc;}:-moz-placeholder{color:#ccc;}::-moz-placeholder{color:#ccc;}:-ms-input-placeholder{color:#ccc;}

/* bubbles */

.contentpanel {
padding: 20px;
position: relative;
}

.row {
margin-left: -10px;
margin-right: -10px;
}

.panel {
-moz-border-radius: 3px;
/* -webkit-border-radius: 3px; */
/* border-radius: 3px; */
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
/* background: #fcfcfc; */
/* border: 0; */
-moz-box-shadow: 0 3px 0 rgba(12,12,12,0.03);
/* -webkit-box-shadow: 0 3px 0 rgba(12,12,12,0.03); */
box-shadow: 0 3px 0 rgba(12,12,12,0.03);
}
.panel-body {
padding: 20px;
}
.qBubble {
width: 100%;
position: relative;
line-height: 20px;
padding: 2%;
font-size: 18px;
text-align: center;
color: #fff;
background: rgb(170, 197, 242);
border: 1px solid rgb(170, 197, 242);
border-radius: 5px;
}
.qBubble:before {
content: "";
position: absolute;
display: inline-block;
width: 0;
height: 0;
border: .75em solid rgba(0, 0, 0, 0);
border-color: #AAC5F2 transparent transparent transparent;
top: 100%;
left: 1em;
}
.qText {
padding: 20px 2% 0 2%;
margin: 0;
}

/*****************************
**** RESUMEN DE LA COMPRA ****
*****************************/
.resumen {
	border: 1px solid #C5B312;
	/*max-width: 200px;
	margin: 0 auto;
	position:absolute;
	top:85;
	left:20;
	width:250px;*/
  	width: 220px;
  	float: left;
}
.resumen .resumen-head{
	background:#C1B22F;
	color:#444;
	font-size:17px;
	font-weight:bold;
	line-height:28px;
	padding:0 10px;
	border-bottom:1px solid #e6e6e6;
	/*background-image: url(../img/redes_azul.png);*/
}
.resumen .resumen-inner{
	padding:10px;
	background: rgb(213, 222, 237);
	font-size: 14px;
	line-height: 18px;
	color: #303435;
}








